<template>
  <div id="circular"></div>
</template>
<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
export default {
  data() {
    return {

    }
  },
  mounted() {
    var scene = new THREE.Scene()
    console.log(THREE, '??')
    // 创建一个线条模型
    var geometry = new THREE.BoxGeometry()
    // 0,0圆弧坐标原点 100圆半径 0，2*Math.PI 圆弧角度
    var arc = new THREE.ArcCurve(0, 0, 120, 0, 2 * Math.PI)
    // 分段术返回51个节点
    var points = arc.getPoints(25)
    geometry.setFromPoints(points)
    var material = new THREE.LineBasicMaterial({
      color: 'red'
    })
    // 线条模型
    // var line = new THREE.Line(geometry, material)
    var line = new THREE.LineLoop(geometry, material)
    scene.add(line)
    // 创建一个相机
    const width = 900
    const height = 600
    const camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000)
    camera.position.set(200, 200, 200)
    camera.lookAt(0, 0, 0)
    // 创建一个渲染器
    var renderer = new THREE.WebGLRenderer()
    renderer.setSize(width, height) // 设置渲染区域尺寸
    renderer.setClearColor('#ffffff', 1)// 设置背景颜色
    renderer.render(scene, camera)
    document.getElementById('circular').appendChild(renderer.domElement)
    const controls = new OrbitControls(camera, renderer.domElement)
    controls.addEventListener('change', function() {
      renderer.render(scene, camera)
    })
  }
}
</script>
